<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>个人中心</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/api.css"/>
        <link rel="stylesheet" href="../css/loaders.css"/>
		<style>
		body{
			background-color: rgb(242,242,242);
		}
        .aui-bar{
            background-color: #6ac82c;
        }
			.person{
				background-color:#fff;
				overflow:hidden;
				padding: 15px;
			}
			.person:active{
				background-color:#ddd;
			}
			.person img{
				width: 60px;
				height:60px;
				border-radius:60px;
				display:block;
				margin:0 15px;
			}
			.person .aui-pull-left p{
				color:#333;
				font-size:20px;
			}
			.person .aui-pull-left span{
				color:#333;
				font-size:18px;
			}
			.person .aui-iconfont{
				color:#ccc;
				line-height: 60px;
				font-size:20px;
			}
			.list-view{
			background-color:#fff;
			margin-top:15px;
			}
			.list-view li{
			overflow:hidden;
			padding: 12px 15px;
			border-top:1px solid #f2f2f2;
			}
			.list-view li:first-child{
				border:none;
			}
			.list-view li:active{
				background-color:#ddd;
			}
			.list-view li img{
				width:30px;
				height:30px;
				float: left;
			}
			.list-view li p{
			color:#333;
			font-size:16px;
				float: left;
				line-height:30px;
				margin-left:10px;
			}
			.list-view li span{
				float: right;
				color:#ccc;
				line-height: 30px;
				font-size:20px;
			}

        #main{
            opacity: 0;
            transition: all 0.5s ease;
        }
        .mask{
            width: 100px;
            height: 100px;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            position: absolute;
        }
        .loader{
            width: 50px;
            height: 50px;
            left: 18px;
            top: 20px;
            position: absolute;
        }
        .loader-inner div{
            width: 60px;
            height: 60px;
            background-color: #6ac82c;
        }
		</style>
	</head>
	<body>
    <div class="mask">
        <div class="loader">
            <div class="loader-inner ball-scale">
                <div></div>
            </div>
        </div>
    </div>
    <div id="main">
    <header id="header" class="aui-bar aui-bar-nav">
        <div id="header-title" class="aui-title">
            个人主页
        </div>
    </header>
    <div id="top-div"></div>
		<div class="person" onclick="openInforSet()">
			<img class="aui-pull-left" src="../image/change-face1.png" />
			<div class="aui-pull-left">
				<p>
					王美丽
				</p>
				<span>13579246810</span>
			</div>
			<span class="aui-iconfont aui-icon-right aui-pull-right"></span>
		</div>
		<ul class="list-view">
			<li onclick="openInforSet()">
				<img src="../image/left-icon1.png" />
				<p>我的交易</p>
				<span class="aui-iconfont aui-icon-right"></span>
			</li>
			<li onclick="openInforSet()">
				<img src="../image/left-icon2.png" />
				<p>我的收藏</p>
				<span class="aui-iconfont aui-icon-right"></span>
			</li>
			<li onclick="openInforSet()">
				<img src="../image/left-icon3.png" />
				<p>收货地址</p>
				<span class="aui-iconfont aui-icon-right"></span>
			</li>
			<li onclick="openInforSet()">
				<img src="../image/left-icon4.png" />
				<p>账户安全</p>
				<span class="aui-iconfont aui-icon-right"></span>
			</li>
		</ul>
		<ul class="list-view">
			<li onclick="openInforSet()">
				<img src="../image/left-icon5.png" />
				<p>关于好农</p>
				<span class="aui-iconfont aui-icon-right"></span>
			</li>
			<li onclick="openInforSet()">
				<img src="../image/left-icon6.png" />
				<p>设置</p>
				<span class="aui-iconfont aui-icon-right"></span>
			</li>
		</ul>
    <div id="bottom-div"></div>
    <footer class="aui-nav" id="footer">
        <ul class="aui-bar-tab">
            <li><a href="../html/frame_tab_1.html">
                <span class="footer-icon footer-icon1"></span>
                <p>
                    首页
                </p></a>
            </li>
            <li>
                <a href="../html/frame_tab_2.html">
                    <span class="footer-icon footer-icon2"></span>
                    <p>
                        产品分类
                    </p></a>
            </li>
            <li><a href="../html/frame_tab_3.html">
                <span class="footer-icon footer-icon3"></span>
                <p>
                    购物车
                </p></a>
            </li>
            <li class="active">
                <span class="footer-icon footer-icon4"></span>
                <p>
                    个人中心
                </p>
            </li>
        </ul>
    </footer>
    </div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/zepto.min.js"></script>
	<script type="text/javascript">
        window.onload=function(){
            setTimeout(function(){
                $('.mask').css('display','none');
                $('#main').css('opacity','1');
            },250)
        };
	function openInforSet(){
        window.location.href = '../html/infor_setting.html'
	}
	</script>
</html>